<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 30px;
        }
        a{
            text-decoration:none;
        }
        table,td,th{
            border:1px solid red;
            /* 边框合并 */    
            border-collapse: collapse;
            text-align: center;
        }
        th,td{
            padding:5px 10px;
        }
    </style>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>用户列表</h1>
    <a href="./add.html">添加用户</a>
    <br><br>
    <table class="table">
        <thead>
            <tr class="head">
                <th>id</th>
                <th>用户名</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2</td>
                <td>王五</td>
                <td>25</td>
                <td>
                    <a href="">编辑</a>
                    <a href="">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        const tbody = document.querySelector('tbody')
        //通过anios，发送异步请求
        axios.get('http://localhost:3000/users').then(res=>{
            // 获取用户数据
            var arr = res.data
            console.log(arr)
        
        tbody.innerHTML=arr.map(item=>{
            return ` <tr>
                <td>${item.id}</td>
                <td>${item.username}</td>
                <td>${item.password}</td>
                <td>
                    <a href="./edit.html?id=${item.id}">编辑</a>
                    <a href="" onclick='deleteItem(${item.id})'>删除</a>
                </td>
            </tr>`
        }).join('')
    })
        //  实现删除方法
        function deleteItem(id){
            const flag  = confirm('确定删除此用户吗')
                if(flag){
                    // 后台删除,然后再跳转新页面进行显示
                    // axios.delete(`http://localhost:3000/users/${id}`).then(res=>{
                    //     location.href='./index.html'
                    // })
                    axios.delete(`http://localhost:3000/users/${id}`).then(res=>{
                        location.href='./index.html'
                    })
                }
            }
        // 写一个用户管理系统




    </script>
</body>

</html>